<!-- 任务中心 -->
<template>
    <div class="task-page"> 
        <div class="task-card" v-show="classTaskList.length>0">
            <div class="module-title">老师布置的任务</div>
            <ul>
                <li class="clearfix shadow3" v-for="(item,index) in classTaskList" :key="index" >
                    <img class="card-img left" :src="item.book.bookCover" alt="">
                    <div class="card-con left">
                        <h4>{{item.book.bookName}}</h4>
                        <div v-if="item.checkInTask.taskCategory!=2">
                            <p>{{item.checkInTask.dayCount}}天阅读计划的第{{item.checkInTask.countday}}天</p>
                            <div class="in-progress" ref="in-progress">
                                <div class="in-elapse" ref="in-elapse" :style="'width:'+ item.checkInTask.percent +'%;'"></div>
                            </div>    
                        </div>
                        <div class="test-data" v-if="item.checkInTask.taskCategory==2">
                            <div class="data-item">
                                <em>{{item.otherInfo.rightCount}}</em>
                                <span>答对题</span>
                            </div>
                            <div class="data-item">
                                <em>{{item.otherInfo.answerQuestionCount-item.otherInfo.rightCount}}</em>
                                <span>答错题</span>
                            </div>
                            <div class="data-item">
                                <em>{{item.otherInfo.answerQuestionCount>0 ? Math.round((item.otherInfo.rightCount/item.otherInfo.answerQuestionCount)*100) : 0}}%</em>
                                <span>正确率</span>
                            </div>
                        </div>
                    </div>
                    <div :class="['btn-label btn-test', {isclock:item.otherInfo.id}]" v-if="item.checkInTask.taskCategory==2" @click="goTest(item)">{{item.otherInfo.id ? '已完成考试':'开始考试任务'}}</div>
                    <div :class="['btn-label btn-clock', {isclock:item.todayIsComplete}]" v-if="item.checkInTask.taskCategory!=2" @click="goDetail(item)">{{item.todayIsComplete ? '今日已完成':'开始打卡任务'}}</div>
                </li>
            </ul> 
        </div> 
        <div class="task-card my-task" v-show="myTaskList.length>0">
            <div class="module-title">自己的打卡计划</div>
            <ul>
                <li class="clearfix shadow3" v-for="(item,index) in myTaskList" :key="index" @click="goDetail(item)">
                    <img class="card-img left" :src="item.book.bookCover" alt="">
                    <div class="card-con left">
                        <h4>{{item.book.bookName}}</h4>
                        <p>{{item.checkInTask.dayCount}}天阅读计划的第{{item.checkInTask.countday}}天</p>
                        <div class="in-progress" ref="in-progress">
                            <div class="in-elapse" ref="in-elapse" :style="'width:'+ item.checkInTask.percent +'%;'"></div>
                        </div>
                    </div>
                    <div :class="['btn-label', {isclock:item.todayIsComplete}]">{{item.todayIsComplete ? '今日已完成':'开始打卡任务'}}</div>
                </li>
            </ul> 
        </div>
        <transition name='fade'>
            <div class="no-con" v-show="noConShow">
                <img src="@/assets/img/no-con.png" alt="">
                <p>你还没有创建任何任务哦...</p>
                <div class="btn-create-task shadow2" @click="goCreateTask()">创建打卡任务</div>
            </div>
        </transition> 
    </div>
</template>

<script>
import { axGet,axPost } from '@/api/index'

export default {
    name: "taskList",
    data(){
        return{
            userid:this.$parent.myInfo.UserId,
            noConShow:false,
            classTaskList:[],
            myTaskList:[],
           
        }
    },
    watch:{
        
    },
    created(){ 
        this.$parent.menuShow=true;
        this.$parent.menuChose=4;

        /****** 验证登录 *****/ 
		if(!sessionStorage.getItem("myInfo")){
			this.$router.replace({path:'/',query: {}});
		}else{
            this.getTaskList()
        }

    },
    mounted(){
    },
    methods:{
        goTest(item){
            
            if(item.otherInfo.id==0){
                this.$router.push({path:'/challengeStart',query: {bookid:item.book.bookId}});
            }else{
                this.$router.push({path:'/challengeEnd',query: {bookid:item.book.bookId,hastest:1,from:'test'}}); 
            }
            
        },
        //去详情
        goDetail(item){
            sessionStorage.setItem("thisBook",JSON.stringify(item.book))
            this.$router.push({path:'/bookDetail',query: {bookid:item.book.bookId}});
        },
        // 去创建任务
        goCreateTask(){
            this.$router.replace({path:'/library',query: {}});
        },
        //任务列表
        getTaskList(){
            axGet('GetUserTask', {
               userId:this.userid
            }).then(res => {
                if(res.ResultCode===1){
                    if(res.Value && res.Value.length>0){
                        res.Value.forEach((item,i)=>{
                            let time = item.checkInTask.createTime.slice(0,10)
                            let count = this.getCount(time)
                            let percent = count > item.checkInTask.dayCount ? 100 : (count/item.checkInTask.dayCount*100);
                            this.$set(item.checkInTask,'countday',count)
                            this.$set(item.checkInTask,'percent',percent)
                            if(item.checkInTask.userId == this.userid){
                                this.myTaskList.push(item)
                            }else{
                                this.classTaskList.push(item)
                            }
                        })
                    }else{
                        this.noConShow=true
                    }
                    
                }
            })
        },
        getCount(time) {
            let counttime = new Date().getTime() - new Date(time).getTime()
            let countday = Math.ceil(counttime / 1000 / 60 / 60 / 24)
            return countday
        },
    }
}
</script>
<style type="text/css" scoped>
.task-page{
    padding: 0.54rem 0.32rem 1.1rem;
    width: 90%;
    height: 80%;
    overflow: scroll;
}
.my-task{
    padding-top: 0.4rem;
}
.task-page .no-con{
    padding-top: 2.2rem;
}
.btn-create-task{
    width: 3.4rem;
    padding: 0.27rem 0;
    line-height: 1;
    font-size: 0.36rem;
    color: #fff;
    border-radius: 0.48rem;
    background: #02affe;
    margin: 0.7rem auto 0;
}
.test-data{
    display:-webkit-box;  
    display:-webkit-flex; 
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
}
.data-item{
    width: 33%;
    text-align: center;
    padding-top: 0.06rem;
}
.data-item em{
    display: block;
    font-size: 0.36rem;
    font-weight: bold;
    height: 0.5rem;
    line-height: 0.5rem;
    color: #02affe;
}
.data-item span{
    display: block;
    color: #999;
    font-size: 0.26rem;
    border-right:1px solid #e0e0e0;
}
.data-item:last-child span{
    border: 0;
}
</style>